<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>31 表单验证</title>
    <script src="./js/vue.js"></script>
    <style>
        .success{
            color: green;
        }
        .error{
            color: red;
        }
        .normal{
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            <label for="">用户名&emsp;</label>
            <input type="text" v-model="username">
            <span :class="usernamemsgclass">{{usernamemsg}}</span>
        </p>
        <p>
            <label for="">手机号码</label>
            <input type="text" v-model="userphone">
            <span :class="userphonemsgclass">{{userphonemsg}}</span>
        </p>
        <p>
            <label for="">密&emsp;&emsp;码</label>
            <input type="text" v-model="userpwd">
            <span :class="userpwdmsgclass">{{userpwdmsg}}</span>
        </p>
        <p>
            <label for="">确认密码</label>
            <input type="text" v-model="userpwdre">
            <span :class="userpwdremsgclass">{{userpwdremsg}}</span>
        </p>
        <button @click="register">注册</button>
    </div>

</body>
<script>
    new Vue({
        el : "#app",
        data : {
            username : "",
            usernamemsg : "请输入长度6到12位只能由数字字母_$组成并且不能以数字开头",
            usernamemsgclass : "normal",
            usernamereg : /^[a-z_$][0-9a-z_$]{5,11}$/i,
            usrenameIs : false,

            userphone : "",
            userphonemsg : "请输入长度为11位的手机号码",
            userphonemsgclass : "normal",
            userphonereg : /^[1]([3-9])[0-9]{9}$/,
            userphoneIs : false,

            userpwd : "",
            userpwdmsg : "请输入6-18位 ，由数字、大写字母、小写字母、特殊字符组成的密码",
            userpwdmsgclass : "normal",
            userpwdreg : /^[0-9a-zA-Z!@#$^]{6,18}$/,   ////6-18位 ，由数字、大写字母、小写字母、特殊字符
            userpwdIs : false,

            userpwdre : "",
            userpwdremsg : "请再次输入密码",
            userpwdremsgclass : "normal",
            usrepwdreIs : false,
        },
        methods : {
            register(){
                if(this.usrenameIs && this.userphoneIs && this.usrepwdreIs && this.usrepwdreIs){
                    alert("注册成功");
                }else{
                    alert("请正确输入信息")
                }
            }
        },
        watch : {
            username(){
                if(this.usernamereg.test(this.username)){
                    this.usernamemsg = "√";
                    this.usernamemsgclass = "success";
                    this.usrenameIs = true;
                }
                else{
                    this.usernamemsg = "请输入长度6到12位只能由数字字母_$组成并且不能以数字开头";
                    this.usernamemsgclass = "error";
                }
            },
            userphone(){
                if(this.userphonereg.test(this.userphone)){
                    this.userphonemsg = "√";
                    this.userphonemsgclass = "success";
                    this.userphoneIs = true;
                }
                else{
                    this.userphonemsg = "请输入长度为11位的手机号码";
                    this.userphonemsgclass = "error";
                }
            },
            userpwd(){
                if(this.userpwdreg.test(this.userpwd)){
                    this.userpwdmsg = "√";
                    this.userpwdmsgclass = "success";
                    this.userpwdIs = true;
                }
                else{
                    this.userpwdmsg = "请输入6-18位 ，由数字、大写字母、小写字母、特殊字符组成的密码";
                    this.userpwdmsgclass = "error";
                }
            },
            userpwdre(){
                if(this.userpwd == this.userpwdre){
                    this.userpwdremsg = "√";
                    this.userpwdremsgclass = "success";
                    this.usrepwdreIs = true;
                }else{
                    this.userpwdremsg = "两次密码输入不一致，请重新输入";
                    this.userpwdremsgclass = "error";
                }
              
            }

        }
    })
</script>

</html>